<template>
  <div class="data-analy-box">
    <el-radio-group
      class="analysis-box hide-first-box"
      v-model="offset"
      size="mini"
    >
      <el-radio-button
        v-for="(item, index) in offsetList"
        v-show="index !== 0"
        :key="index"
        :label="item.value"
        @click.native.prevent="judgeSame(item.value, 'offset')"
      >
        {{ item.label }}
      </el-radio-button>
    </el-radio-group>
    <div style="padding: 5px" class="user-table">
      <ak-table
        :sortAttr="coverageSortObj"
        :tableData="tableData.length > 0 ? tableData[pageNum - 1] : []"
        :labelObj="coverageLabel"
        :addList="coverageAdd"
        :checkedIdAttr="'gridId'"
        :checkedId="gisForm.offsetCId"
        @changeSort="changeSortType"
        @changeCId="changeCId"
      >
      </ak-table>

      <div class="pagination-container">
        <el-pagination
          :hide-on-single-page="true"
          background
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          align="right"
          :pager-count="5"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 伪分页 需求
import AkTable from '@/components/gisPageComponents/table'
import { mapState, createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')

export default {
  name: 'networkCoverage',
  components: { AkTable },
  data: () => ({
    coverageLabel: {
      gridId: 'ID',
      mobileCoverRate: '移动',
      unicomCoverRate: '联通',
      telecomCoverRate: '电信'
    },
    coverageAdd: [
      'gridId',
      'mobileCoverRate',
      'unicomCoverRate',
      'telecomCoverRate'
    ],
    coverageSortObj: {
      mobileCoverRate: 'custom',
      unicomCoverRate: 'custom',
      telecomCoverRate: 'custom'
    },

    pageSize: 10,
    total: 1,
    pageNum: 1,

    tableData: []
  }),
  computed: {
    ...mapState(['gisForm']),
    ...mapStateForm([
      'offsetCId', //选中的id，
      'offsetCoverageList', // 网络覆盖率列表
      'offsetList' //网络分析列表
    ]),
    // 筛选网络的条件
    offset: {
      get() {
        return this.gisForm.offset
      },
      set(nv) {
        // this.setFilterPageNum(1)
        this.setOffset(nv)
      }
    }
  },

  watch: {
    offsetCoverageList(nv) {
      // console.log(nv,'offsetCoverageList');
      //修改分页问题
      this.changePage(1)
      this.initTableData()
    },
    offsetCId(nv) {
      if (nv) {
        this.jumpPage(nv)
      }
    }
  },
  created() {
    // 初始化加载列表
    this.initTableData()
  },
  methods: {
    ...mapMutationsForm(['setOffsetCId', 'setOffsetSort', 'setOffset']),
    // 初始化
    initTableData() {
      let allList = this.offsetCoverageList
      this.total = allList.length
      let tableData = this.group(allList, this.pageSize)
      this.tableData = tableData
      // console.log( tableData );
    },
    // 把一个数组拆成分页数组
    group(array, subGroupLength) {
      let index = 0
      let newArray = []
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)))
      }
      return newArray
    },
    // 判断 (栅格选项,关联分析) 同属性是否点击相同
    judgeSame(item, attr, disabled = false) {
      if (disabled) return false
      item === this[attr] ? (this[attr] = null) : (this[attr] = item)
    },
    // 跳转到当前选中id 页
    jumpPage(cId) {
      // 查找当前页 列表是否存在 cId
      let findList = this.tableData[this.pageNum - 1]
      let checkIdAttr = 'gridId'
      let checkItem = findList.find(v => v[checkIdAttr] == cId)
      if (checkItem === undefined) {
        // 查找总列表
        let page = this.pageNum
        let allList = this.offsetCoverageList
        let currentIndex = allList.findIndex(v => v[checkIdAttr] == cId)
        if (currentIndex !== -1) {
          page = Math.ceil((currentIndex + 1) / this.pageSize)
        }
        // console.log( page)
        this.pageNum = page
      }
    },

    // 更改sort
    changeSortType(e) {
      console.log(e)
      // 老接口排序字段需要修改下
      let sortStr = e.sortStr.split('C')[0]

      this.setOffsetSort({ sortType: e.sortType, sortStr })
    },
    changeCId(e) {
      // console.log( e );
      this.setOffsetCId({ data: e, jumpMap: true })
    },

    changePage(e) {
      this.pageNum = e
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}
.analysis-box {
  padding: 8px 4px;
}
</style>
